<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body,html {
            height: 100%;
            padding: 0;
            margin: 0;
            background-color: #edf6f7;
        }
        #login-f {
            height: 100%;
        }
        .main-box {
            text-align: center;
            height: 100%;
        }
        .main-box:before {
            content: "";
            display: inline-block;
            vertical-align: middle;
            height: 100%;
            margin-left: -.25em;
        }
        .main-content {
            display: inline-block;
            vertical-align: middle;
        }
        .input-content {
            margin-top: 30px;
            overflow: hidden;
            border-radius: 5px;
        }
        .input-content .label {
            float: left;
            display: inline-block;
            height: 56px;
            width: 56px;
        }
        .input-content .u-label {
            background: url("../../image/personal.png") no-repeat center center #fff;
        }
        .input-content input {
            height: 50px;
            float: right;
            padding-left: 10px;
            border: 2px solid transparent;
            font-size: 18px;
            color: #000;
        }
        .input-content .psd-label {
            background: url("../../image/save.png") no-repeat center center #fff;
        }
        .input-content input:focus {
            outline: none;
        }
        button {
            background-color: #0f88eb;
            color: #fff;
            padding: 15px 35px;
            border: none;
            border-radius: 5px;
            font-size: 18px;
        }
        .bottom-btn {
            margin-top: 10px;
            width: 100%;
            overflow: hidden;
            height: 54px;
        }
        .bottom-btn button[type='submit'] {
            float: right;
            margin-right: 2px;
        }
        .bottom-btn button[type='button'] {
            float: left;
        }
        .link-to-fp {
            color: #838486;
            display: block;
            text-align: right;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="main-box">
    <div class="main-content">
        <form id="login-f" action="" method="post">
            <div class="input-content">
                <label for="user-name" class="label u-label"></label>
                <input id="user-name" placeholder="用户名">
            </div>
            <div class="input-content">
                <label for="psd" class="label psd-label"></label>
                <input id="psd" placeholder="密码">
            </div>
            <a class="link-to-fp" href="#">忘记密码？</a>
            <div class="bottom-btn">
                <button type="submit">登录</button>
                <button type="button">注册</button>
            </div>
        </form>
    </div>
</div>
</body>
</html>